<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todo list</title>
    <link rel="stylesheet" href="../css/quick.css">
    <!-- <link rel="stylesheet" href="../css/global.css"> -->
    <link rel="stylesheet" href="../css/ui.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/all.js"></script>
</head>

<body>
    <div class="flex-sb">
        <div class="todo-list">
            <h1>todo list</h1>
            <h2>正在进行</h2>
            <ul id="todoListContainer"></ul>

            <div>
                <input class="ui-input" id="inputTodo" placeholder="请输入任务或计划">
                <button class="ui-button" data-type="success" id="btnAddTodo">添加</button>
            </div>
            <h2>已完成</h2>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
        <div class="dynamic">
            <h2>动态</h2>
        </div>
    </div>

    <script>

        var todoApi = {
            async add(todo) {
                let request = await fetch('http://127.0.0.1:2022/', {
                    method: 'POST',
                    body: JSON.stringify(todo),
                    headers: {
                        'Content-Type': 'application/json',
                    }
                })
                if (request.ok) {
                    let response = await request.json()
                    return response
                }
            }
        }

        var todoList = []
        function getTodoById(id) {
            for (let i = 0; i < todoList.length; i++) {
                const todo = todoList[i];
                if (todo.id == id) {
                    return todo
                }
            }
        }


        var log = console.log.bind(console)
        var btnAddTodo = document.querySelector('#btnAddTodo')
        var inputTodo = document.querySelector('#inputTodo')
        var todoListContainer = document.querySelector('#todoListContainer')
        
        var id = 1
        
        
        btnAddTodo.addEventListener('click', function () {
            if (inputTodo.value.trim() == '') {
                inputTodo.classList.add('error')
                return
            }
            var todo = {
                title: inputTodo.value,
                id: id,
                done: false
            }
            id++

            addTodo(todo)
            updateTodoList()
            inputTodo.value = ''
            inputTodo.classList.remove('error')
        })


        todoListContainer.addEventListener('click', function (event) {
            if (event.target.classList.contains('todo-done')) {
                let todoElement = event.target.closest('.todo')
                let id = todoElement.dataset.id
                console.log('todo-done', id);
                doneTodo(id)
            }
        })
    

        function addTodo(todo) {
            todoList.push(todo)
            var todoListContainer = document.querySelector('#todoListContainer')
            var todoHtml = TemplateTodo(todo)
            todoListContainer.insertAdjacentHTML('beforeEnd', todoHtml)

            todoApi.add(todo)
        }

        function doneTodo(id) {
            var todo = getTodoById(id)
            todo.done = true
        }

        function removeTodo() {

        }

        function updateTodoList() {
            var html = ''
            todoList.forEach(function (todo) {
                var t = TemplateTodo(todo)
                html += t
            })
            todoListContainer.innerHTML = html
        }

        function TemplateTodo(todo) {
            var t = /* html */`
                <li class="todo" data-id="${todo.id}">
                    <span class="todo-title">${todo.title}</span>
                    <a class="todo-done" href="javascript:;">完成</a>
                    <a class="todo-remove" href="javascript:;">删除</a>
                </li>`
            return t
        }


    </script>
</body>

</html>